<template>
  <div class="t-box" >
    <t-title class="title" :description="description" v-if="title">{{title}}</t-title>
    <div class="t-box-content">
      <slot/>
    </div>
    <!-- <slot v-waterMarker/>
     <div class="water-marker" v-waterMarker></div> -->
  </div>
</template>

<script>
export default {
  props:{
    title:{
      type:String,
    },
    description:{
      type: String,
      default: "",
    }
  }
}
</script>

<style lang="scss" scoped>
.t-box{
  position: relative;
  border-radius: 5px;
  padding:25px; 
  background: $wihte-color;
  margin-bottom: 20px;
  .title{
    margin-bottom: 15px;
    // position: absolute;
    // left: 0;
  }
   .water-marker{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
  }
  .t-box-content{
    // margin-top: 40px;
  }
}
</style>